<template>
    <h3>ComponentB</h3>
    <p>标题：{{ title }}</p>
    <p>年龄：{{ age }}</p>
    <p>朋友列表：</p>
    <ul>
        <li v-for="(item, index) of names" key="index">{{ item }}</li>
    </ul>
    <button @click="addFriend">增加一个朋友</button>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        title: {
            // 约定传入参数title字段的数据类型，如果不符合这个数据类型，还是会正常传入，但是会在浏览器控制台打印警告（warn）信息
            type: [String, Number, Array, Object],
            // required为true代表该参数为必传，否则会在浏览器控制台打印警告（warn）信息
            required: true
        },
        age: {
            type: Number,
            // 设置默认值，如果父组件不传该参数，则该参数的默认值为下列值
            default: 0
        },
        // 数字和字符串可以直接使用default，但是如果是数组或对象，则必须通过工厂函数返回默认值
        names: {
            type: Array,
            default() {
                return ['无']
            }
        }
    },
    methods: {
        addFriend() {
            // props的参数是只读的，如果是简单数据类型（String,Number,Boolean）等会直接在控制台报错，但是如果是数组和对象，虽然可以修改成功，但是界面不会刷新，而且不建议这样操作
            // this.title = "修改标题"; // 该操作会报错
            this.names.push("张三");  //该操作数据可以修改成功，但是界面不会有任何变化
        }
    }
}
</script>